<template>
  <swiper :class="['card-swiper',DotStyle?'square-dot':'round-dot']"
    indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" 
    @change="cardSwiper" indicator-color="#8799a3" indicator-active-color="#0081ff">
    <swiper-item v-for="item, index in swiperList" :key="item.id" :class="cardCur==index?'cur':''">
      <view class="swiper-item">
        <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
      </view>
    </swiper-item>
  </swiper>
</template>

<script>
  export default {
    data(){
      return {
        cardCur: 0,
        swiperList: [{
          id: 0,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
        }, {
          id: 1,
            type: 'image',
            url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
        }, {
          id: 2,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
        }, {
          id: 3,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
        }, {
          id: 4,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
        }, {
          id: 5,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
        }, {
          id: 6,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
        }],
      }
    },
    
    onLoad() {
      this.towerSwiper('swiperList');
      // 初始化towerSwiper 传已有的数组名即可
    },
    
    methods: {
      DotStyle(e) {
        this.DotStyle = e.detail.value
      },
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
    }
  }
</script>

<style>
</style>
